﻿<!DOCTYPE html>
<html lang="en">
<#include "include/resource-head.ftl"/>
<#assign active='tu'/>
<body>
<#include "include/common-top.ftl"/>
<div class="main-container" id="main-container">
    <div class="main-container-inner">
    <#include "include/common-menu.ftl"/>
        <div class="main-content">
            <div class="page-content">
                <div class="col-xs-12">
                    <div class="row-fluid">
                        <div class="widget-box">
                            <div class="widget-header widget-header-blue widget-header-flat">
                                <h4 class="lighter">
                                    <i class="icon-plus"></i>用户BMI扇形图
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="widget-main padding-4">
                                        <div id="piechart-placeholder"></div>
                                    </div><!-- /widget-main -->
                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->
</body>
<#include "include/resource-script.ftl"/>
<script src="/themes/plugins/flot/jquery.flot.min.js"></script>
<script src="/themes/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="/themes/plugins/flot/jquery.flot.resize.min.js"></script>
<script>
    var placeholder = $('#piechart-placeholder').css({'width':'90%' , 'min-height':'150px'});


    var data = [
        { label: "过轻(${(gq/(gq+zc+gz+fp+fcfp))?string('0.##%')})",  data: ${gq}, color: "#68BC31"},
        { label: "正常(${(zc/(gq+zc+gz+fp+fcfp))?string('0.##%')})",  data: ${zc}, color: "#2091CF"},
        { label: "过重(${(gz/(gq+zc+gz+fp+fcfp))?string('0.##%')})",  data: ${gz}, color: "#AF4E96"},
        { label: "肥胖(${(fp/(gq+zc+gz+fp+fcfp))?string('0.##%')})",  data: ${fp}, color: "#DA5430"},
        { label: "非常肥胖(${(fcfp/(gq+zc+gz+fp+fcfp))?string('0.##%')})",  data: ${fcfp}, color: "#FEE074"}
    ];
    function drawPieChart(placeholder, data, position) {
        $.plot(placeholder, data, {
            series: {
                pie: {
                    show: true,
                    tilt:0.8,
                    highlight: {
                        opacity: 0.25
                    },
                    stroke: {
                        color: '#fff',
                        width: 2
                    },
                    startAngle: 2
                }
            },
            legend: {
                show: true,
                position: position || "ne",
                labelBoxBorderColor: null,
                margin:[-30,15]
            }
            ,
            grid: {
                hoverable: true,
                clickable: true
            }
        })
    }
    drawPieChart(placeholder, data);
</script>
</html>

